<template>
  <div>
    <div id="rose" ref="rose" style="height:329px;margin-bottom:16px;"></div>
  </div>
</template>

<script>
import echarts from 'echarts'
export default {
  name: 'Rose',
  props: { chartData: Object },
  data () {
    return {
      mychart: {}
    }
  },
  mounted () {
    this.initChart()
    window.addEventListener('resize', () => {
      setTimeout(() => {
        this.mychart.resize()
      }, 500)
    })
  },
  watch: {
    chartData: {
      handler (newVal, oldVal) {
        this.initChart()
      },
      deep: true
    }
  },
  methods: {
    initChart () {
      this.mychart = echarts.init(this.$refs.rose)
      const option = {
        backgroundColor: 'rgb(12,16,61)',
        color: ['rgb(15,95,254)', 'rgb(223,32,75)', 'rgb(102,0,254)', 'rgb(29,207,227)'],
        // title: {
        //   text: this.chartData.name,
        //   left: '16',
        //   top: '16',
        //   textStyle: {
        //     color: '#fff',
        //     fontSize: '14',
        //     fontWeight: 'normal'
        //   }
        // },
        // tooltip: {
        //   trigger: 'item',
        //   formatter: '{a} <br/>{b}: {c} ({d}%)'
        // },
        series: [
          // 内环
          {
            name: this.chartData.name,
            type: 'pie',
            radius: [0, '65%'],
            label: {
              normal: {
                position: 'inner',
                formatter: params => {
                  // var str = params.name + params.value
                  return (params.value / this.chartData.total).toFixed(2) * 100 + '%'
                }
              }
            },
            labelLine: {
              normal: {
                show: false
              }
            },
            data: [...this.chartData.data]
          },
          // 外环
          {
            name: this.chartData.name,
            type: 'pie',
            radius: [0, '65%'],
            label: {
              normal: {
                color: '#fff',
                formatter: function (params) {
                  var str = params.name + params.value
                  return str.length < params.name.length
                    ? str
                    : `${str.slice(0, params.name.length)}\n${str.slice(params.name.length)}`
                }
              }
            },
            data: [...this.chartData.data]
          }
        ]
      }
      this.mychart.setOption(option)
    }
  }
}
</script>

<style lang="less" scoped></style>
